import React from 'react';
import {
  Box,
  Avatar,
  Progress,
  Divider,
  Pressable,
  Center,
  Text,
  extendTheme,
} from 'native-base';
import Diamond_SVG from '../public/icons/diamond';
import Setting_SVG from '../public/icons/setting';
import LinearGradient from 'react-native-linear-gradient';

const Mine = () => {
  //data
  const userinfo = {
    name: '张三',
    id: '001',
    avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
    level: 12,
    battleNum: 100,
    winRate: 90,
    exp: 1000,
    nextLevelExp: 10000,
  };
  //render
  return (
    <Box flex={1}>
      <Box
        style={{
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'flex-end',
          backgroundColor: '#F44236',
          padding: 10,
        }}>
        <Setting_SVG></Setting_SVG>
      </Box>
      <Box
        style={{
          backgroundColor: '#F44236',
          paddingLeft: 10,
          paddingRight: 10,
          paddingTop: 20,
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
        }}>
        <Avatar source={{uri: userinfo.avatar}} size={20}></Avatar>
        <Box style={{marginLeft: 10}}>
          <Box style={{display: 'flex', flexDirection: 'row'}}>
            <Text color={'white'} fontSize={25}>
              {userinfo.name}
            </Text>
            <Diamond_SVG level={userinfo.level}></Diamond_SVG>
          </Box>
          <Box
            style={{
              display: 'flex',
              flexDirection: 'row',
              paddingBottom: 5,
              alignItems: 'center',
            }}>
            <Progress
              value={userinfo.exp}
              max={userinfo.nextLevelExp}
              size="xs"
              colorScheme="lime"
              width={100}
            />
            <Text color={'white'}>
              {userinfo.exp}/{userinfo.nextLevelExp}
            </Text>
          </Box>

          <Box style={{display: 'flex', flexDirection: 'row'}}>
            <Text color={'white'}>对局总量：{userinfo.battleNum} </Text>
            <Text color={'white'}>胜率：{userinfo.winRate}%</Text>
          </Box>
        </Box>
      </Box>
      <Box
        style={{
          display: 'flex',
          flexDirection: 'row',
          backgroundColor: '#F44236',
          justifyContent: 'space-around',
          paddingLeft: 20,
          paddingRight: 20,
          paddingTop: 20,
        }}>
        <Box style={{display:'flex',alignItems:'center'}}>
          <Text color={'white'}>0</Text>
          <Text color={'white'}>帖子</Text>
        </Box>
        <Divider orientation="vertical" />
        <Box style={{display:'flex',alignItems:'center'}}>
          <Text color={'white'}>0</Text>
          <Text color={'white'}>关注</Text>
        </Box>
        <Divider orientation="vertical" />
        <Box style={{display:'flex',alignItems:'center'}}>
          <Text color={'white'}>0</Text>
          <Text color={'white'}>历史</Text>
        </Box>
      </Box>
      <LinearGradient colors={['#F44236','#ffffff']} style={{height:80}} start={{x:0.5,y:0.3}} end={{x:0.5,y:0.7}}>
        <Box style={{ backgroundColor:'#fda4af',margin:10,borderRadius:10,paddingLeft:20,padding:10}}>
          <Text fontSize={16} color={'white'}>观看高手对战</Text>
          <Text fontSize={16} color={'white'}>了解高手套路</Text>
        </Box>
      </LinearGradient>
      <Box style={{backgroundColor:'#fff',paddingLeft:10,paddingTop:10}} flex={1}>
        <Text fontSize={20} fontWeight={'bold'}>更多服务</Text>
        <Box style={{marginTop:10,paddingLeft:10}}>
          <Text fontSize={16}>意见反馈</Text>
        </Box>
      </Box>
    </Box>
  );
};
export default Mine;
